<template>
	<view class="big_box">
		<view class="poster_url">
			<image 
				:src="poster_url" 
				mode="widthFix"
				@longpress="handleLongPress"
				:data-url="poster_url"
			></image>
		</view>
		
		<!-- 微信分享按钮（隐藏） -->
		<button v-if="isWeixin" style="display:none;" id="wxShareBtn"></button>
		
		<!-- 操作菜单 -->
		<u-action-sheet 
			:list="actionList" 
			v-model="showAction" 
			:cancel-btn="true"
			title="请选择操作"
			@click="handleMenuClick"
		></u-action-sheet>
	</view>
</template>

<script>
import { mapGetters } from "vuex";
import api from '@/api/index.js'

export default {
	data() {
		return {
			poster_url: '/static/index_image/poster.png',
			jssdkData: {},
			isWeixin: false,
			wxReady: false,
			showAction: false,
			actionList: [
				{ text: '发送给朋友', icon: 'share-square' },
				{ text: '保存到相册', icon: 'photo' },
				{ text: '识别二维码', icon: 'scan' }
			]
		}
	},
	computed: mapGetters(['isLogin', 'uid', 'userInfo']),
	onLoad() {
		this.checkWeixin();
		this.getjssdk();
	},
	methods: {
		// 检测微信环境
		checkWeixin() {
			const ua = navigator.userAgent.toLowerCase();
			this.isWeixin = /micromessenger/i.test(ua);
		},
		
		// 获取jssdk配置
		getjssdk() {
			api.getjssdk({ url: window.location.href.split('#')[0] }).then(res => {
				if (res.response.statusCode == 200) {
					this.jssdkData = res.data.data;
					// this.initWxSDK();
				}
			}).catch(err => {
				console.error(err);
			});
		},
		
		// 初始化微信SDK
		initWxSDK() {
			if (!this.isWeixin || !window.wx) return;
			
			wx.config({
				debug: false,
				appId: this.jssdkData.appId,
				timestamp: this.jssdkData.timestamp,
				nounceStr: this.jssdkData.nonceStr,
				signature: this.jssdkData.signature,
				jsApiList: [
					'onMenuShareAppMessage',
					'onMenuShareTimeline',
					'previewImage',
					'scanQRCode',
					'updateAppMessageShareData',
					'updateTimelineShareData'
				]
			});
			
			wx.ready(() => {
				this.wxReady = true;
				this.setShareConfig();
			});
			
			wx.error(res => {
				console.error('微信SDK配置失败:', res);
			});
		},
		
		// 设置分享配置
		setShareConfig() {
			const shareData = {
				title: '邀请你加入我们',
				desc: '专属邀请海报，扫码立即参与',
				link: window.location.href,
				imgUrl: this.poster_url,
				success: () => {
					uni.showToast({ title: '分享成功', icon: 'success' });
				}
			};
			
			// 新版分享接口
			wx.updateAppMessageShareData(shareData);
			wx.updateTimelineShareData(shareData);
			
			// 旧版兼容
			wx.onMenuShareAppMessage(shareData);
			wx.onMenuShareTimeline(shareData);
		},
		
		// 长按图片事件
		handleLongPress() {
			this.showAction = true;
		},
		
		// 菜单点击事件
		handleMenuClick(index) {
			switch(index) {
				case 0: // 发送给朋友
					this.shareToFriend();
					break;
				case 1: // 保存到相册
					this.saveImage();
					break;
				case 2: // 识别二维码
					this.scanQRCode();
					break;
			}
		},
		
		// 微信原生分享
		shareToFriend() {
			if (this.isWeixin && this.wxReady) {
				document.getElementById('wxShareBtn').click();
			} else {
				uni.showToast({
					title: '请使用微信分享功能',
					icon: 'none'
				});
			}
		},
		
		// 保存图片到相册
		saveImage() {
			uni.downloadFile({
				url: this.poster_url,
				success: res => {
					if (res.statusCode === 200) {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({ title: '保存成功', icon: 'success' });
							},
							fail: () => {
								uni.showToast({ title: '保存失败', icon: 'none' });
							}
						});
					}
				},
				fail: () => {
					uni.showToast({ title: '下载图片失败', icon: 'none' });
				}
			});
		},
		
		// 识别二维码
		scanQRCode() {
			if (this.isWeixin && this.wxReady) {
				wx.scanQRCode({
					needResult: 1,
					scanType: ["qrCode"],
					success: res => {
						const result = res.resultStr;
						console.log('扫描结果:', result);
						// 处理扫描结果
					}
				});
			} else {
				uni.previewImage({
					urls: [this.poster_url],
					current: 0
				});
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.big_box {
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;
	
	.poster_url {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		
		image {
			width: 100%;
			border-radius: 16rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		}
	}
}
</style>
